<template>
  <div>
    <el-row :gutter="30" justify="space-around" class="h-20">
      <el-col :lg="6">
        <div class="w-full h-full card-info flex absolute items-center justify-between">
          <div class="w-2/4 h-2/3 flex flex-col justify-center ml-6 overflow-hidden">
            <span style="color: rgba(160, 174, 192, 1)" class="text-xs mb-1"
              >工人在线人数 （名）</span
            >
            <span style="color: rgba(255, 255, 255, 1); font-size: 18px; line-height: 25.2px">
              {{ equipment.actualUndergroundPersonNum }}
            </span>
          </div>
          <div
            class="w-12 h-12 flex justify-center items-center mr-5"
            style="background-color: rgba(0, 117, 255, 1); border-radius: 12px"
          >
            <img class="w-10 h-10" src="@/assets/img/home/worker.png" />
          </div>
        </div>
      </el-col>
      <el-col :lg="6">
        <div class="w-full h-full card-info absolute flex items-center justify-between">
          <div class="w-2/4 h-2/3 flex flex-col justify-center ml-6 overflow-hidden">
            <span style="color: rgba(160, 174, 192, 1)" class="text-xs mb-1"
              >摄像头在线数目 (个)</span
            >
            <span style="color: rgba(255, 255, 255, 1); font-size: 18px; line-height: 25.2px">
              {{ equipment.cameraOnlineNum }}
            </span>
          </div>
          <div
            class="w-12 h-12 flex justify-center items-center mr-5"
            style="background-color: rgba(0, 117, 255, 1); border-radius: 12px"
          >
            <img class="w-10 h-10" src="@/assets/img/home/camera-one.png" />
          </div>
        </div>
      </el-col>
      <el-col :lg="6">
        <div class="w-full h-full card-info absolute flex items-center justify-between">
          <div class="w-2/4 h-2/3 flex flex-col justify-center ml-6 overflow-hidden">
            <span style="color: rgba(160, 174, 192, 1)" class="text-xs mb-1"
              >正在运行设备数量 （台）</span
            >
            <span style="color: rgba(255, 255, 255, 1); font-size: 18px; line-height: 25.2px">
              {{ equipment.equipmentOperationNum }}
            </span>
          </div>
          <div
            class="w-12 h-12 flex justify-center items-center mr-5"
            style="background-color: rgba(0, 117, 255, 1); border-radius: 12px"
          >
            <img class="w-10 h-10" src="@/assets/img/home/stapler.png" />
          </div>
        </div>
      </el-col>
      <el-col :lg="6">
        <div class="w-full h-full card-info absolute flex items-center justify-between">
          <div class="w-2/4 h-2/3 flex flex-col justify-center ml-6 overflow-hidden">
            <span style="color: rgba(160, 174, 192, 1)" class="text-xs mb-1"
              >工作车辆数量 （台）</span
            >
            <span style="color: rgba(255, 255, 255, 1); font-size: 18px; line-height: 25.2px">
              {{ equipment.vehicleOperationNum }}
            </span>
          </div>
          <div
            class="w-12 h-12 flex justify-center items-center mr-5"
            style="background-color: rgba(0, 117, 255, 1); border-radius: 12px"
          >
            <img class="w-10 h-10" src="@/assets/img/home/truck.png" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="5" class="mt-2" justify="space-around">
      <el-col :lg="15" :xs="24" :sm="24" :md="15" class="map-card">
        <div
          class="w-full h-120 map-part map-card p-2"
          style="background-color: rgb(255, 251, 251)"
        >
          <maps />
        </div>
      </el-col>
      <el-col :lg="9" :xs="24" :sm="24" :md="9">
        <div
          class="w-full h-120 from-part line-card p-2"
          style="background-color: rgb(255, 251, 251)"
        >
          <line-chart></line-chart>
        </div>
      </el-col>
    </el-row>
    <el-row class="mt-2" justify="space-around">
      <el-col :lg="24" :md="24" :xs="24" :sm="24">
        <div class="w-full h-120 chart-part" style="background-color: rgb(255, 251, 251)">
          <bar-chart />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mt-2" justify="space-around">
      <el-col :lg="12" :md="12" :xs="24" :sm="12">
        <div class="w-full h-120 chart-part" style="background-color: rgb(255, 251, 251)">
          <Scroll></Scroll>
        </div>
      </el-col>

      <el-col :lg="12" :md="12" :xs="24" :sm="12">
        <div class="w-full h-120 chart-part" style="background-color: rgb(255, 251, 251)">
          <pie-chart class="circle" :pieData="pieData"></pie-chart>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { defineComponent, reactive, onMounted, ref } from 'vue';
import Scroll from '@/components/alert-scroll/scroll.vue';
import maps from '@/components/maps/maps.vue';
import { useStore } from 'vuex';
import pieChart from '@/components/charts/pie-chart.vue';
import lineChart from '@/components/charts/line-chart.vue';
import barChart from '@/components/charts/bar-chart.vue';
import { ElLoading } from 'element-plus';
import { getOnlineEvery } from '@/utils/request';

export default defineComponent({
  components: {
    lineChart,
    pieChart,
    Scroll,
    maps,
    barChart,
  },
  setup() {
    const store = useStore();
    const equipment = ref({});
    const userId =
      JSON.parse(window.localStorage.getItem('userInfo')) &&
      JSON.parse(window.localStorage.getItem('userInfo')).id;
    const pieData = reactive([]);
    const loading = ref(null);
    const openFullScreen1 = () => {
      loading.value = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
    };

    onMounted(() => {
      openFullScreen1();
      store.dispatch('alert/getAlertType', { userId }).then((res) => {
        Object.keys(res).forEach((i) => {
          const tempData = {
            name: store.getters.alertTypeText[i],
            value: res[i],
          };
          pieData.push(tempData);
        });
      });
      getOnlineEvery({ userId })
        .then((res) => {
          if (res.status === 200 && res.data.code === 200) {
            equipment.value = res.data.data;
            loading.value.close();
          }
        })
        .catch((error) => {
          console.log(error);
          loading.value.close();
        });
    });
    return {
      pieData,
      equipment,
    };
  },
});
</script>

<style scoped>
@import url('./index.scss');
:deep().el-header {
  padding: 0;
}

@media (max-width: 1199px) {
  .map-part {
    margin-bottom: 20px;
  }
  .form-part {
    margin-bottom: 20px;
  }
  .chart-part {
    margin-bottom: 20px;
  }
}
</style>
